<template>
  <h1>vue体验</h1>
  <h2>msg:{{ msg }}</h2>
  <input type="text" v-model="msg" />
  <div>
    <p>
      展示user姓名:<span>{{ user.name }}</span> 展示user年龄:<span>{{
        user.age
      }}</span>
    </p>
    <h1>methods定义函数</h1>
    <el-button @click="handClick" type="primary">点击改变user</el-button>
  </div>
  <el-divider></el-divider>
  <p>
    v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出,
    一般v-text和插值语法相似https://blog.csdn.net/fushan2012/article/details/123067394
  </p>
  <div>
    <p>v-text：<span v-text="textStr"></span></p>
    <p>v-html：<span v-html="htmlStr"></span></p>
  </div>
  <el-divider></el-divider>
  <!-- v-show控制元素（标签）的显示隐藏 -->
  <!-- 语法：v-show="数据|js表达式" -->
  <div v-show="isShow">我是v-show</div>
  <!-- v-if 控制元素（标签）的创建移除  -->
  <!-- 语法：v-if="数据|js表达式" -->
  <div v-if="isShow">我是v-if</div>
  <el-button type="primary" @click="changeShow"
    >切换v-show,v-if展示,打开浏览器开发工具看dom结构，v-show的dom元素还在</el-button
  >
  <el-divider></el-divider>
  <h2>dom元素属性写法</h2>
  <div :title="title">我是一个DIV</div>
  <el-button type="primary" size="small" @click="changeTitle"
    >我是一个DIV的dom结构的title</el-button
  >
  <el-divider></el-divider>
  <h2>v-for的用法</h2>
  <div v-for="i in 4" :key="i">第{{ i }}个div</div>
  <el-divider></el-divider>
  <!-- v-for="item in list" -->
  <div v-for="item in data.list" :key="item.id">名字：{{ item.name }}</div>
  <el-divider></el-divider>
  <!--  v-for="(item,i) in list" -->
  <div v-for="(item, index) in data.list" :key="item.id">
    名字：{{ item.name }} 年龄：{{ item.age }} 索引{{ index }}
  </div>
  <el-divider></el-divider>
  <!--  v-for="(v,k,i) in obj" -->
  <div v-for="(value, key, index) in data.obj" :key="key">
    值：{{ value }} 键：{{ key }} 索引：{{ index }}
  </div>
</template>
<script>
export default {
  name: "lesson1",
};
</script>
<script setup>
import { ref, reactive } from "vue";
// 定义数据ref一般用于基本的数据类型，比如string，boolean reactive一般用于对象 ref的地方其实也是调用的reactive实现的
const msg = ref(123);
// 注意reactive响应的是属性
const user = reactive({
  name: "张三",
  age: 20,
});
const textStr = ref("<b>我是textStr</b>");
const htmlStr = ref("<b>我是textStr</b>");
const isShow = ref(true);
const title = ref("标题");
const data = reactive({
  // 数组
  list: [
    { id: 1, name: "tom", age: 10 },
    { id: 2, name: "tony", age: 12 },
  ],
  // 对象
  obj: {
    name: "tom",
    age: 10,
  },
});

// method以**函数表达式** 和 **函数声明** 方式都可以
const handClick = () => {
  user.name = user.name == "张三" ? "李四" : "张三";
  user.age = user.age == 20 ? 30 : 20;
};
// 切换展示
function changeShow() {
  isShow.value = !isShow.value;
}
function changeTitle() {
  title.value = "变更后的title";
}
</script>

<style lang="scss" scoped></style>
